<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务六：通过HTML及CSS模拟报纸排版</title>
	<link rel="stylesheet" type="text/css" href="css/task10.css">
</head>
<body>
<div class="content">
	<div class="header">
		<div class="top-right">2017.03</div>
		<div class="top-left">ife baidu.com</div>
	</div>
	<div class="title">
		<div class="title-content">
			<p class="main-title">about</p>
			<p class="main-title">technology</p>
			<p class="sub-title">About technolohy about technology about technology</p>
			<p class="number">700</p>
			<div>
				<span class="large-text">3.2</span>
				<div class="right-title">
					<p class="middle-text">CSS</p>
					<p class="small-text">csscsscsscssscsss</p>
				</div>
			</div>
		</div>
		<div class="img-content">
			<div class="img img-left"></div>
			<div class="img img-right"></div>
			<img src="images/sea.png">
			<div class="passage">
				<div class="what">
					<h2>What</h2>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
				</div>
				<div class="when">
					<h2>When</h2>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
				</div>
				<div class="how">
					<h2>How</h2>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
					<div class="how-info">
						<span>What------</span><span class="percentage">40%</span><br/>
						<span>What------</span><span class="percentage">40%</span><br/>
						<span>What------</span><span class="percentage">40%</span>
					</div>
				</div>
			</div>
		</div>
		
	</div>
	<div class="bottom-content">
		<div class="left-content">
			<span class="b-title">the </span>
			<span class="e-title">technology of front</span><br/>
			<span class="c-title">前端技术领域</span>
			<hr>
			<article>
				<p class="first-p">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端<img src="images/sea.png">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端。</p>
				
				<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前前端前前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端。</p>
				<p>前端前端前前端前前端前端前端前前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端。</p>
			</article>
		</div>
		<div class="right-content">
			<div class="pic">
				<img src="images/sea.png">
				<div class="pic-title">
					<span class="main">前端技术</span>
					<span class="sub">前端技术前端技术</span>
				</div>
			</div>
			<div class="list">
				<ul>
					<li>前端前端前端...................................................................<span>1</span></li>
					<li>前端前端...........................................................................<span>8</span></li>
					<li>前端前端前端前端前端前端.........................................<span>12</span></li>
				</ul>
				<div class="last">
					<div class="red-content">
						<label>
							<span class="second">ONE TWO<br/>THREE FOUR FIVE</span>
							<span class="third">hello world hello world hello world</span>
						</label>
						<span class="first">O</span>
					</div>
					<span class="last-span">hello world hello world hello d hello world hello worldhello world hello world hello world hello world hello </span>
				</div>
			</div>
			
		</div>

	</div>
</div>	
</body>
</html>